<script setup>
import * as echarts from "echarts";
import {onMounted, ref} from "vue";
import apiBigscreen  from "@/api/bigscreen.js"

const refEcharts = ref()
const chart = ref()
const data = ref([])

onMounted(async () => {
  data.value = await apiBigscreen.getLeftBottom()
  chart.value = echarts.init(refEcharts.value)
  chart.value.setOption({
    title: {
      text: "堆叠面积图",
      top: "%5",
      x: "center",
      textStyle: {
        color: "#fff",
        fontSize: 20,
        textShadowBlur: 10,
        textShadowColor: "#33ffff",
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#e6b600"
        }
      }
    },
    grid: {
      left: "1%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: data.value.day,
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#fff"
        }
      }
    },
    series: [
      {
        name: "服饰",
        type: "line",
        data: data.value.num.Chemicals,
        smooth: true,
        showSymbol: false,
        stack: "Total",
        lineStyle: {
          width: 0,
        },
        emphasis: {
          focus: "series"
        },
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(128,255,165)"
            },
            {
              offset: 1,
              color: "rgb(1,191,236)"
            }
          ])
        }
      },
      {
        name: "数码",
        type: "line",
        data: data.value.num.Clothes,
        stack: "Total", //数据堆叠
        smooth: true, //折线图平滑效果 变成曲线图
        showSymbol: false, //   隐藏所有数据点

        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(0, 221, 255)",
            },
            {
              offset: 1,
              color: "rgb(77, 119, 255)",
            },
          ]),
        },
        lineStyle: {
          // 设置线段样式
          width: 0,
        },
        emphasis: {
          //设置高亮的图形样式和标签样式
          focus: "series", //只显示选中的内容高亮
        },
      },
      {
        name: "家电",
        type: "line",
        data: data.value.num.Electrical,
        stack: "Total", //数据堆叠
        smooth: true, //折线图平滑效果 变成曲线图
        showSymbol: false, //   隐藏所有数据点

        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(55, 162, 255)",
            },
            {
              offset: 1,
              color: "rgb(116, 21, 219)",
            },
          ]),
        },
        lineStyle: {
          // 设置线段样式
          width: 0,
        },
        emphasis: {
          //设置高亮的图形样式和标签样式
          focus: "series", //只显示选中的内容高亮
        },
      },
      {
        name: "家居",
        type: "line",
        data: data.value.num.digit,
        stack: "Total", //数据堆叠
        smooth: true, //折线图平滑效果 变成曲线图
        showSymbol: false, //   隐藏所有数据点

        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 0, 135)",
            },
            {
              offset: 1,
              color: "rgb(135, 0, 157)",
            },
          ]),
        },
        lineStyle: {
          // 设置线段样式
          width: 0,
        },
        emphasis: {
          //设置高亮的图形样式和标签样式
          focus: "series", //只显示选中的内容高亮
        },
      },
      {
        name: "日化",
        type: "line",
        data: data.value.num.gear,
        stack: "Total", //数据堆叠
        smooth: true, //折线图平滑效果 变成曲线图
        showSymbol: false, //   隐藏所有数据点

        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgb(255, 191, 0)",
            },
            {
              offset: 1,
              color: "rgb(224, 62, 76)",
            },
          ]),
        },
        lineStyle: {
          // 设置线段样式
          width: 0,
        },
        emphasis: {
          //设置高亮的图形样式和标签样式
          focus: "series", //只显示选中的内容高亮
        },
      },
    ]
  })
})
</script>

<template>
  <div class="chart" ref="refEcharts"></div>
</template>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>